<template>
    <div class="container">
        <n-radio-group v-model:value="checkValue" name="radiogroup">
            <n-space>
                <n-radio v-for="view in views" :key="view.value" :value="view.value">
                    {{ view.label }}
                </n-radio>
            </n-space>
        </n-radio-group>
        <hash v-show="checkValue === 'hash'" class="full-height"></hash>
        <aes v-show="checkValue === 'aes'" class="full-height"></aes>
        <sm4 v-show="checkValue === 'sm4'" class="full-height"></sm4>
        <rsa v-show="checkValue === 'rsa'" class="full-height"></rsa>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Hash from './hash/index.vue'
import Sm4 from './sm4/index.vue'
import Aes from './aes/index.vue'
import Rsa from './rsa/index.vue'
const checkValue = ref('hash')
const views = ref([{
    label: 'HASH',
    value: 'hash'
}, {
    label: 'AES',
    value: 'aes'
}, {
    label: 'SM4',
    value: 'sm4'
}, {
    label: 'RSA',
    value: 'rsa'
}])

</script>

<style scoped>
.container {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.full-height {
    height: calc(100% - 120px);
}
</style>